<template>
  <div class="app-home">
    <!-- window.print() -->
    <div class="top_bot">
      <el-button type="primary" @click="exportPDF">导出PDF</el-button>
      <el-button type="primary" @click="printing" :key="key_index"
        >打印</el-button
      >
    </div>
    <div
      ref="exportPDF"
      id="content"
      style="width: 1000px; margin: 10px auto 0"
    >
      <div
        class="content"
        style="margin: 20px auto; padding: 20px; width: calc(100% - 30px)"
      >
        <div
          class="title"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <p class="canc" style="width: 200px"></p>
          <p class="biaot" style="font-size: 22px">
            徐州恒清食品有限公司采购单
          </p>
          <p class="canc" style="width: 200px">餐次:</p>
        </div>
        <div
          class="title"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <p class="txt" style="text-align: left; font-size: 16px; width: 50%">
            订单号:{{ send_info.id }}
          </p>
          <p class="txt" style="text-align: left; font-size: 16px; width: 50%">
            采购日期:{{ send_info.sendTime }}
          </p>
          <!-- <p class="txt" style="text-align: left; font-size: 16px; width: 20%">
            L-大许-中
          </p> -->
        </div>
        <div
          class="title"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <p class="txt" style="text-align: left; font-size: 16px; width: 50%">
            客户名称:{{ send_info.schoolName }}
          </p>
          <p class="txt" style="text-align: left; font-size: 16px; width: 50%">
            联系方式:{{ send_info.schoolPhone }}
          </p>
          <!-- <p class="txt" style="text-align: left; font-size: 16px; width: 20%">
            客户编码:
          </p> -->
        </div>

        <!-- <el-table :data="send_info.detail" border>
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="type.cate.name" label="一级分类" width="180">
          </el-table-column>
          <el-table-column prop="type.name" label="商品名称" width="180">
          </el-table-column>
          <el-table-column prop="num" label="订购数量"> </el-table-column>
          <el-table-column prop="num" label="发货数量"> </el-table-column>
          <el-table-column prop="beizhu" label="备注"> </el-table-column>
        </el-table> -->

        <table cellspacing="0" style="width: 100%">
          <thead>
            <tr style="background-color: rgb(236 236 236)">
              <th style="width: 50px; padding: 5px; border: 2px solid #000">
                序号
              </th>
              <th style="width: 180px; padding: 5px; border: 2px solid #000">
                一级分类
              </th>
              <th style="width: 180px; padding: 5px; border: 2px solid #000">
                商品名称
              </th>
              <th style="width: 80px; padding: 5px; border: 2px solid #000">
                订购数量
              </th>
              <th style="width: 80px; padding: 5px; border: 2px solid #000">
                发货数量
              </th>
              <th style="width: 80px; padding: 5px; border: 2px solid #000">
                单价
              </th>
              <th style="width: 100px; padding: 5px; border: 2px solid #000">
                备注
              </th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(item, index) in send_info.details" :key="index">
              <td
                style="
                  width: 50px;
                  padding: 5px;
                  border: 2px solid #000;
                  text-align: center;
                "
              >
                {{ index + 1 }}
              </td>
              <td
                style="
                  width: 180px;
                  padding: 5px;
                  border: 2px solid #000;
                  text-align: center;
                "
              >
                {{ item.cateName }}
              </td>
              <td
                style="
                  width: 180px;
                  padding: 5px;
                  border: 2px solid #000;
                  text-align: center;
                "
              >
                {{ item.typeName }}
              </td>
              <td
                style="
                  width: 80px;
                  padding: 5px;
                  border: 2px solid #000;
                  text-align: center;
                "
              >
                {{ item.num }}{{ item.brandName }}
              </td>
              <td
                style="
                  width: 80px;
                  padding: 5px;
                  border: 2px solid #000;
                  text-align: center;
                "
              >
                {{ item.num }}{{ item.brandName }}
              </td>
              <td
                style="
                  width: 80px;
                  padding: 5px;
                  border: 2px solid #000;
                  text-align: center;
                "
                @click="getNum(index, item.price2, 'price2')"
              >
                {{ item.price || "0" }}
              </td>
              <td
                style="
                  width: 100px;
                  padding: 5px;
                  border: 2px solid #000;
                  text-align: center;
                "
              >
                {{ item.remark }}
              </td>
            </tr>
          </tbody>
        </table>

        <div
          v-if="money > 0"
          class="title"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <p class="erhao_size" style="font-size: 18px">
            大写实际总价:{{ moneyDx }}
          </p>
          <p class="erhao_size" style="font-size: 18px">
            实际总价:

            {{ money }}元
          </p>
        </div>

        <div
          class="title"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <p
            class="txt_xiao"
            style="width: 25%; text-align: left; font-size: 16px"
          >
            制单人:
          </p>
          <p
            class="txt_xiao"
            style="width: 25%; text-align: left; font-size: 16px"
          >
            分拣人:
          </p>
          <p
            class="txt_xiao"
            style="width: 25%; text-align: left; font-size: 16px"
          >
            送货人:
          </p>
          <p
            class="txt_xiao"
            style="width: 25%; text-align: left; font-size: 16px"
          >
            客户签收:
          </p>
        </div>
        <div
          class="title"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <p
            class="txt_xiao"
            style="width: 25%; text-align: left; font-size: 16px"
          >
            出框:
          </p>
          <p
            class="txt_xiao"
            style="width: 25%; text-align: left; font-size: 16px"
          >
            回筐:
          </p>
          <p
            class="txt_xiao"
            style="width: 25%; text-align: left; font-size: 16px"
          >
            物流部:
          </p>
          <p
            class="txt_xiao"
            style="width: 25%; text-align: left; font-size: 16px"
          ></p>
        </div>

        <p class="bott_size" style="text-align: left">
          以上货品均符合国家食品安全标准，请确认收货。存根(白)客户(红)财务记账(蓝)发货(黄)
        </p>
      </div>
    </div>

    <el-dialog title="修改价格" :visible.sync="query.dialogVisible" width="30%">
      <el-input-number
        v-model="query.val"
        autocomplete="off"
        :min="0"
      ></el-input-number>
      <span slot="footer" class="dialog-footer">
        <el-button @click="query.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setNum">确 定</el-button>
      </span>
    </el-dialog>

    <!-- <router-view :key="$route.path" /> -->
  </div>
</template>
  
  <script>
import Print from "print-js";

import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import { getDeliveryInfo } from "@/api/system/procure";
// https://www.hqspkj.cn
export default {
  components: {},
  name: "Index",
  data() {
    return {
      key_index: 0,
      isTrue: true,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      send_info: {},
      query: {
        val: null,
        dialogVisible: false,
        index: null,
        key: null,
      },
      money: 0,
      moneyDx: 0,
    };
  },
  created() {
    // console.log(this.$route.query.id)
    getDeliveryInfo(this.$route.query.id).then((res) => {
      this.send_info = res.data;
      // this.send_info.moneyDx = this.numberParseChina(this.send_info.money);
    });
  },
  methods: {
    getNum(index, val, key) {
      console.log(key);
      this.query.key = key;
      this.query.val = val;
      this.query.index = index;
      this.query.dialogVisible = true;
      console.log(this.query);
    },
    setNum(index, val) {
      // console.log(this.query);
      // console.log(this.send_info.detail);
      // this.query.val = val
      if (this.query.val == undefined) {
        this.query.val = 0;
      }
      this.send_info.detail[this.query.index][this.query.key] = this.query.val;
      this.query.dialogVisible = false;
      var obj = this.send_info.detail[this.query.index];
      // console.log(obj)
      // console.log(obj.num * this.query.val)
      var obj = (this.send_info.detail[this.query.index]["price2"] =
        this.query.val);

      var money = 0;
      this.send_info.detail.forEach((item, index) => {
        var price2 = item.price2;
        if (price2 == undefined) {
          price2 = 0;
        }
        // console.log(price2);
        money = money + price2 * item.num;
        console.log(money);
      });
      // console.log(money);
      this.money = money;
      this.moneyDx = this.numberParseChina(money);
    },
    async exportPDF() {
      // this.isTrue = true
      const content = this.$refs.exportPDF;
      const canvas = await html2canvas(content);
      const imgData = canvas.toDataURL("image/png");
      const doc = new jsPDF({
        orientation: "portrait",
        unit: "px",
        format: "a4",
      });
      const imgProps = doc.getImageProperties(imgData);
      const pdfWidth = doc.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      doc.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
      doc.save("配送单.pdf");

      // this.isTrue = false
    },
    printing() {
      // window.print()
      // return
      Print({
        printable: "content",
        type: "html",
        // css: './htmlStyle.css',
        scanStyles: false,
        targetStyles: ["*"],
        style:
          "table {border-collapse: collapse; width: 100%;} th, td {border: 1px solid #dfe6ec; padding: 4px 0;}", // 可选-打印时去掉眉页眉尾
      });
    },
  },
};
</script>
  
  <style  lang="scss">
body {
}
.app-home {
  text-align: center;
  position: relative;

  .top_bot {
    text-align: right;
    width: 1000px;
    margin: 20px auto 0;
  }
}

// .dayin {
//   width: 1000px;
//   margin: 20px auto;
//   padding: 10px;
//   border: 1px solid #f1f1f1;
// }

// .title {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
// }

// .txt_xiao {
//   font-size: 16px;
//   width: 25%;
//   text-align: left;
// }

// .bott_size {
//   font-size: 18px;
//   text-align: left;
// }

// .erhao_size {
//   font-size: 18px;
// }

// .biaot {
//   font-size: 22px;
// }
// .canc {
//   font-size: 16px;
//   width: 100px;
//   text-align: left;
// }

// .txt {
//   text-align: left;
//   font-size: 16px;
// }

// .txt:nth-child(1) {
//   width: 40%;
// }
// .txt:nth-child(2) {
//   width: 40%;
// }
// .txt:nth-child(3) {
//   width: 20%;
// }
</style>
  
  